<template>
  <div class="data-processing-dag-node">
    <div
      class="main-area"
      @mouseEnter="onMainMouseEnter"
      @mouseLeave="onMainMouseLeave"
    >
      <div class="main-info">
        <!-- 节点类型icon -->
        <i
          class="node-logo"
          :style="{
            backgroundImage: nodeData.type
              ? `url(${NODE_TYPE_LOGO[nodeData.type]})`
              : ''
          }"
        />
        <el-tooltip placement="top" :content="nodeData.name">
          <div class="ellipsis-row node-name">{{ nodeData.name }}</div>
        </el-tooltip>
      </div>

      <!-- 节点状态信息 -->
      <div class="status-action">
        <el-tooltip
          v-if="nodeData.status === CellStatus.ERROR"
          :content="nodeData.statusMsg"
        >
          <i class="status-icon status-icon-error" />
        </el-tooltip>
        <i
          v-if="nodeData.status === CellStatus.SUCCESS"
          class="status-icon status-icon-success"
        />

        <!-- 节点操作菜单 -->
        <div class="more-action-container">
          <i class="more-action" />
        </div>
      </div>

      <!-- 添加下游节点 -->
      <div v-if="nodeData.type !== NodeType.OUTPUT" class="plus-dag">
        <el-dropdown trigger="click" placement="top">
          <i class="plus-action" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in PROCESSING_TYPE_LIST"
                :key="item.type"
              >
                <div
                  class="each-sub-menu"
                  @click="clickPlusDragMenu(item.type)"
                >
                  <i
                    class="node-mini-logo"
                    :style="`background-image: url(${
                      NODE_TYPE_LOGO[item.type]
                    })`"
                  />
                  <span>{{ item.name }}</span>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { Node } from '@antv/x6'
import { NodeType, CellStatus } from './types'
import { getDownstreamNodePosition, createNode, createEdge } from './hooks'
import { PROCESSING_TYPE_LIST, NODE_TYPE_LOGO } from './config'
import {
  ElTooltip,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem
} from 'element-plus'

defineOptions({
  name: 'DataProcessingDagNode'
})

const getNode: any = inject('getNode')
const node = ref<Node>()

const nodeData = ref<{
  type?: NodeType
  status?: CellStatus
  [key: string]: any
}>({})
const setNodeData = (data: Record<string, any>) => {
  const { name, type, status, statusMsg } = data
  nodeData.value = {
    name,
    type,
    status,
    statusMsg
  }
}

onMounted(() => {
  const _node = getNode() as Node
  _node.on('change:data', ({ current }) => {
    setNodeData(current)
  })

  node.value = _node
  setNodeData(_node.getData())
})

// 创建下游的节点和边
const createDownstream = (type: NodeType) => {
  const _node = node.value!
  const { graph } = _node.model || {}
  if (graph) {
    // 获取下游节点的初始位置信息
    const position = getDownstreamNodePosition(_node, graph)
    // 创建下游节点
    const newNode = createNode(type, graph, position)
    const source = _node.id
    const target = newNode.id
    // 创建该节点出发到下游节点的边
    createEdge(source, target, graph)
  }
}

// 点击添加下游+号
const clickPlusDragMenu = (type: NodeType) => {
  createDownstream(type)
}

// 鼠标进入矩形主区域的时候显示连接桩
const onMainMouseEnter = () => {
  const _node = node.value!
  // 获取该节点下的所有连接桩
  const ports = _node.getPorts() || []
  ports.forEach((port: any) => {
    _node.setPortProp(port.id, 'attrs/circle', {
      fill: '#fff',
      stroke: '#85A5FF'
    })
  })
}

// 鼠标离开矩形主区域的时候隐藏连接桩
const onMainMouseLeave = () => {
  const _node = node.value!
  // 获取该节点下的所有连接桩
  const ports = _node.getPorts() || []
  ports.forEach((port: any) => {
    _node.setPortProp(port.id, 'attrs/circle', {
      fill: 'transparent',
      stroke: 'transparent'
    })
  })
}
</script>

<style lang="scss" scoped>
@use 'DataProcessingDagNode';
</style>
